<template>
    <div class="navFooter">
      <ul>
        <li v-for="(value, index) in navData" @touchstart.stop.prevent="goto(value.nav_link)">
          <img class="navFooter-img" v-if="currentIndex === index" :src="value.active_nav" alt="">
          <img class="navFooter-img" v-else :src="value.nav" alt="">
          <div class="msgNum" v-if="value.nav_msg">
            <new-msg :num="newMsgNum"></new-msg>
          </div>
          <p :class="{font_active:currentIndex === index}">{{value.nav_name}}</p>
        </li>
      </ul>
    </div>
</template>

<script>
    import NewMsg from "../newMsg/newMsg";
    import {mapGetters} from 'vuex'

    export default {
      components: {NewMsg},
      name: "nav-footer",
      props: {
        currentIndex: {
          type: Number,
          default: 0
        }
      },
      data () {
        return {
          navData: [
            {
              nav: "../../static/img/home_normal.png",
              active_nav: "../static/img/home_selected.png",
              nav_name: "云健康",
              nav_link: "/"
            },
            {
              nav: "../../static/img/msg_normal.png",
              active_nav: "../static/img/msg_selected.png",
              nav_name: "消息",
              nav_link: "message",
              nav_msg: true
            },
            {
              nav: "../../static/img/shop_normal.png",
              active_nav: "../static/img/shop_selected.png",
              nav_name: "商城",
              nav_link: ""
            },
            {
              nav: "../../static/img/person_normal.png",
              active_nav: "../static/img/person_selected.png",
              nav_name: "我的",
              nav_link: "personal"
            },
          ]
        }
      },
      methods: {
        goto (url) {
          this.$router.push(url)
        }
      },
      computed: {
        ...mapGetters([
          'newMsgNum'
        ])
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .navFooter {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 900;
    width: 100%;
    /*height: 1.9rem;*/
    overflow-x: hidden;
    box-shadow: 0 -4px 10px rgba(0,0,0,.156863), 0 4px 10px rgba(0,0,0,.227451);
    ul {
      /*padding: 0.25rem 0;*/
      display: flex;
      height: 100%;
      /*border-top: 1px solid #cccccc;*/
      background-color: #fff;
      li {
        flex: 1;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 14px 0 6px 0;/*rem*/
        position: relative;
        .navFooter-img{
          height: 42px;/*rem*/
          width: 42px;/*rem*/
        }
        p {
          /*margin-top: 8px;*/
          text-decoration: none;
          color: #7E7D7F;
          /*line-height: 1;*/
          font-size: 18px;/*px*/
          margin-top: 8px;/*rem*/
        }
        .font_active {
          color: #2196f3;
        }
        .msgNum{
          position: absolute;
          top: 4px;
          transform: translateX(50%);
        }
      }
    }
  }
</style>
